<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>align-items</title>
    <link rel="stylesheet" href="flex-align-items.css">
</head>
<body>
    <div class="flex_align_items_flex_start">
        <div class="div_item"><span>1</span></div>
        <div class="div_item"><span>2</span></div>
        <div class="div_item"><span>3</span></div>
        <div class="div_item"><span>4</span></div>
        <div class="div_item"><span>5</span></div>
    </div>

    <div class="flex_align_items_flex_end">
        <div class="div_item"><span>1</span></div>
        <div class="div_item"><span>2</span></div>
        <div class="div_item"><span>3</span></div>
        <div class="div_item"><span>4</span></div>
        <div class="div_item"><span>5</span></div>
    </div>

    <div class="flex_align_items_center">
        <div class="div_item"><span>1</span></div>
        <div class="div_item"><span>2</span></div>
        <div class="div_item"><span>3</span></div>
        <div class="div_item"><span>4</span></div>
        <div class="div_item"><span>5</span></div>
    </div>
    
    <div class="flex_align_items_baseline">
        <div class="div_item"><p class="f_s_25">1</p></div>
        <div class="div_item"><p class="f_s_28">2</p></div>
        <div class="div_item"><p class="f_s_30">3</p></div>
        <div class="div_item"><p class="f_s_33">4</p></div>
        <div class="div_item"><p class="f_s_35">5</p></div>
    </div>

    <div class="flex_align_items_stretch">
        <div class="div_item" style="height:auto;"><span>1</span></div>
        <div class="div_item" style="height:auto;"><span>2</span></div>
        <div class="div_item" style="height:auto;"><span>3</span></div>
        <div class="div_item" style="height:auto;"><span>4</span></div>
        <div class="div_item" style="height:auto;"><span>5</span></div>
    </div>
</body>
</html>